<template>
	<view class="box flex flex-column justify-evenly align-center">
		<view class="btn" style="position: absolute; top: 0; right: 0;">
			<u-button @click="goNext" type="primary"  text="下一步" style="border: none; background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));"></u-button>
		</view>
		<view class="teacher" style="overflow: hidden;" @click="goTeacher" :style="{transform: Tstatus? 'scale(1.2)' : 'scale(0.9)'}">
			<img src="/static/teacher.png" alt="" style="height: 400rpx; width: 400rpx;"/>
		</view>
		<view class="text" style="font-size: 40rpx; color: aliceblue;">
			我的身份是{{identity}}
		</view>
		<view class="student" 
		@click="goStudent"
		style=" overflow: hidden; border-radius: 50%; border: 4px solid #9a2124; background-color: #f4d1c9;"
		:style="{transform: Sstatus? 'scale(1.1)' : 'scale(0.85)'}">
			<img src="/static/student.png" alt="" style="height: 400rpx; width: 400rpx;" />
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				identity:"？",
				Sstatus:false,
				Tstatus:false,
				id:""
			};
		},
		onLoad(e) {
		    this.id=e.id
		},
	methods:{
		goTeacher()
		{
			this.Tstatus=true
			this.Sstatus=false
			this.identity="老师"
		},
		goStudent()
		{
			this.Sstatus=true
			this.Tstatus=false
			this.identity="学生"
		},
		goNext()
		{
			let result = {
				role:this.identity,
				nickname:this.identity == "学生" ? "小朋友" :"大朋友",
				school:"?",
				introduction:"你好呀~",
				sex:'?'		
			}
			uni.switchTab({
				url:"/pages/self/self"
			})
			db.collection("jiajiao_users").where({_id:this.id}).update(
				result
			).then(res => {
				uni.setStorage({
					key: "jiajiao_demo_account",
					data:{
						...result,
					    _id:this.id
					}
				})
			})
		}
		
	}	
	}
</script>

<style lang="scss">
.box {
		background-color: white;
		width: 100%;
		height: 93vh;
		background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
	}
</style>
